<template>
  <div class="app-container">
    <FullCalendar :options="calendarOptions" />
  </div>
</template>

<script setup>
import { defineComponent } from "vue";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interaction from "@fullcalendar/interaction";
import dayjs from 'dayjs'

const matchList = ref([
  {
    id: "1",
    title: "第一个任务",
    start: "2024-05-26 13:22:24",
    allDay: true,
    color: "#FECACA",
    textColor: "#6B7280",
  },
  {
    id: "11",
    title: "第二个任务",
    start: "2024-05-26 13:22:24",
    end: "2024-05-28 23:22:24",
    allDay: true,
    color: "#6EE7B7",
  },
  {
    id: "12",
    title: "第三个任务",
    start: "2024-05-26 13:22:24",
    allDay: true,
    color: "#93C5FD",
  },
  {
    id: "13",
    title: "劳动节",
    start: "2024-05-01 00:00:00",
    allDay: true,
    color: "#F59E0B",
    editable: false,
  },
  {
    id: "2",
    title: "第二个任务",
    start: "2024-05-27 13:22:24",
    end: "2024-06-27 23:22:24",
    allDay: true,
    color: "#FBCFE8",
  },
  {
    id: "4",
    title: "第三个任务",
    start: "2024-05-28 13:22:24",
    end: "2024-046-28 23:22:24",
    allDay: true,
    color: "#EDE9FE",
  },
]);

const handleDateSelect = (e) => {
  // console.log(e, "handleDateSelect");
};

const handleEventClick = (e) => {
  // console.log(e, "handleEventClick");

};

const handleEvents = (e) => {
  // console.log(e, "handleEvents");
};
const eventDrop = (
  event,
  dayDelta,
  minuteDelta,
  allDay,
  revertFunc,
  jsEvent,
  ui,
  view
) => {

};
// 开始拖拽
const startDrag = (event,jsEvent,ui)=>{
  console.log(event,'ssss');
  let obj = event.event
  let id = obj.id
  let start = obj.startStr
  let end = obj.endStr
  console.log([start,end],'开始拖拽时间点');
}
// 拖拽结束
const stopDrag = (event,jsEvent,ui)=>{
   console.log(event,'endedb');
  let obj = event.event
  let start = obj.startStr
  let end = obj.endStr
  console.log([start,end],'结束拖拽时间点');
}
// 定义日历配置
const calendarOptions = {
  plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interaction],
  locale: "zh-cn",
  firstDay: "1",
  initialView: "dayGridMonth", // 初始视图
  weekends: true, // 显示周末
  height: 800, //日历高度
  eventColor: "#3BB2E3", // 全部日历日程背景色
  themeSystem: "bootstrap", // 主题色(本地测试未能生效)
  timeGridEventMinHeight: "20", // 设置事件的最小高度
  aspectRatio: 1.65, // 设置日历单元格宽度与高度的比例。
  headerToolbar: {
    left: "prev,next today",
    center: "title",
    right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
  },
  // buttonText: {
  //     today: '今天',
  //     month: '月',
  //     week: '周',
  //     day: '日'
  //   },
  slotLabelFormat: {
    hour: "2-digit",
    minute: "2-digit",
    meridiem: false,
    hour12: false, // 设置时间为24小时
  },
  handleWindowResize: true,
  droppable: true, //可拖拽的
  editable: true,
  selectable: true,
  selectMirror: true,
  dayMaxEvents: true,
  weekends: true,
  selectable: true, // 是否可以选中日历格
  selectMirror: true,
  selectMinDistance: 0, // 选中日历格的最小距离
  dayMaxEvents: true,
  weekends: true,
  navLinks: true, // 天链接
  selectHelper: false,
  slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
  select: handleDateSelect,
  eventClick: handleEventClick,
  eventsSet: handleEvents,
  eventDragStart:startDrag,
  eventDragStop:stopDrag,
  events: matchList.value,
};
</script>

